<template>
  <div class="dashboard-container">
    <!-- 上方三个数据卡片 -->
    <div class="top-boxes">
      <div class="top-box">
        <div class="box-text">
          <div class="box-header">总数量</div>
          <div class="box-value">1000</div>
        </div>
        <img src="/images/box.png" alt="box" class="box-img" />
      </div>
      <div class="top-box">
        <div class="box-text">
          <div class="box-header">未完成数量</div>
          <div class="box-value">20</div>
        </div>
        <img src="/images/box.png" alt="box" class="box-img" />
      </div>
      <div class="top-box">
        <div class="box-text">
          <div class="box-header">已完成数量</div>
          <div class="box-value">980</div>
        </div>
        <img src="/images/box.png" alt="box" class="box-img" />
      </div>
    </div>

    <!-- 下方可视化图表 -->
    <div class="chart-container">
      <div class="chart-top">
        <div class="chart-title">告警数量统计趋势</div>
        <div class="chart-controls">
          <div class="time-tabs">
            <button class="tab-btn" :class="{ active: tab === 'hour' }" @click="tab = 'hour'">最近1小时</button>
            <button class="tab-btn" :class="{ active: tab === 'day' }" @click="tab = 'day'">最近24小时</button>
            <button class="tab-btn" :class="{ active: tab === 'week' }" @click="tab = 'week'">近一周</button>
          </div>
          <div class="date-range">
            <input type="datetime-local" v-model="startTime" />
            <span> - </span>
            <input type="datetime-local" v-model="endTime" />
          </div>
        </div>
      </div>
      <div id="dataChart" class="chart-content"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const tab = ref('week');
const startTime = ref('2024-07-23T00:00');
const endTime = ref('2024-07-29T16:28');

onMounted(() => {
  const chartDom = document.getElementById('dataChart');
  if (chartDom) {
    const myChart = echarts.init(chartDom);

    const alarmData = [
      { date: '2024-07-23', value: 420 },
      { date: '2024-07-24', value: 480 },
      { date: '2024-07-25', value: 162 },
      { date: '2024-07-26', value: 450 },
      { date: '2024-07-27', value: 620 },
      { date: '2024-07-28', value: 220 },
      { date: '2024-07-29', value: 260 },
    ];

    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: '{b}<br/>告警数量：{c}条',
      },
      xAxis: {
        type: 'category',
        data: alarmData.map((item) => item.date),
        axisLine: { 
          lineStyle: { 
            color: '#eaeef2',
            width: 1,
            type: 'solid'
          } 
        },
        axisTick: { show: false },
      },
      yAxis: {
        type: 'value',
        axisLine: { 
          lineStyle: { 
            color: '#eaeef2',
            width: 1,
            type: 'solid'
          } 
        },
        splitLine: { 
          lineStyle: { 
            color: '#eaeef2',
            width: 1,
            type: 'dashed'
          } 
        },
      },
      series: [
        {
          data: alarmData.map((item) => item.value),
          type: 'line',
          smooth: true,
          areaStyle: { color: 'rgba(49, 93, 250, 0.1)' },
          lineStyle: { color: '#315DFA', width: 2 },
          itemStyle: { color: '#315DFA' },
        },
      ],
      grid: { 
        left: '3%', 
        right: '4%', 
        bottom: '3%', 
        containLabel: true,
        borderColor: '#eaeef2',
        borderWidth: 1
      },
    };

    myChart.setOption(option);
    window.addEventListener('resize', () => myChart.resize());
  }
});
</script>

<style lang="less" scoped>
.dashboard-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;

  .top-boxes {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

    .top-box {
      flex: 1;
      background-color: #f9fafc;
      border-radius: 8px;
      padding: 0 20px 0 20px; // 修改padding，底部为0
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 100px; // 固定高度以便更好地控制布局

      .box-text {
        text-align: left;
        padding: 20px 0 20px 0; // 文字部分添加适当内边距
      }

      .box-header {
        font-size: 14px;
        color: #909399;
        margin-bottom: 8px;
      }

      .box-value {
        font-size: 28px;
        font-weight: 700;
        color: #303133;
      }

      .box-img {
        width: 62px;
        height: 62px;
        object-fit: contain;
        align-self: flex-end; // 确保图片始终在底部
        margin-bottom: 0; // 确保无底部边距
      }
    }
  }

  .chart-container {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .chart-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #eaeef2;

      .chart-title {
        font-size: 16px;
        color: #303133;
        font-weight: 500;
        position: relative;
        padding-left: 15px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 10px;
          height: 10px;
          background-color: #315DFA;
        }
      }

      .chart-controls {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .time-tabs {
        display: flex;
        align-items: center;
        border: 1px solid #eaeef2;
        border-radius: 4px;
        overflow: hidden;

        .tab-btn {
          padding: 6px 12px;
          background-color: #fff;
          cursor: pointer;
          color: #606266;
          transition: all 0.3s;
          border: none;
          border-right: 1px solid #eaeef2;

          &:last-child {
            border-right: none;
          }

          &.active {
            background-color: #315DFA;
            color: #fff;
          }

          &:hover {
            color: #409eff;
          }
        }
      }

      .date-range {
        display: flex;
        align-items: center;
        border: 1px solid #eaeef2;
        border-radius: 4px;
        padding: 0 5px;

        input {
          border: none;
          outline: none;
          padding: 6px 0;
          font-size: 12px;
        }

        span {
          margin: 0 5px;
          color: #909399;
        }
      }
    }

    .chart-content {
      width: 100%;
      height: 400px;
    }
  }
}
</style>